<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition>
      <p v-if="show">hello</p>
    </Transition>
    <!-- 为过渡命名 -->
    <Transition name="fade">
      <div class="move" v-if="show"></div>
    </Transition>
    <!-- css的animation -->
    <!-- 如果想在某个节点初次渲染时应用一个过渡效果，可以添加appear attribute -->
    <Transition name="bounce" appear>
      <p v-if="show" style="text-align: center;">
        Hello here is some bounce text!
      </p>
    </Transition>
    <!-- 自定义过渡class -->
    <!-- 通过传递props来指定自定义的过渡class。比如结合第三方css动画库时的使用 -->
    <Transition
      name="custom-class"
      enter-active-class="animate__animated animate__tada"
      leave-acitve-class="animate__animated animate__wobble">
      <p v-if="show">Hello here is some custom-class text!</p>
    </Transition>
    <!-- 深层级过渡与显式过渡时间 -->
    <!-- 通过duration prop来显式指定过渡的持续时间（毫秒为单位） :duration="550" -->
    <!-- 也可以使用对象的形式传入，分开指定进入和离开所需的时间 -->
    <Transition name="nested" :duration="{ enter: 500, leave: 800 }" appear>
      <div v-if="show" class="outer">
        深层级过渡与显式过渡时间
        <div class="inner">Hello</div>
      </div>
    </Transition>
    <!-- 元素间过渡 -->
    <p>Click to cycle through states:</p>
    <Transition mode="out-in">
      <button @click="state = 'save'" v-if="state === 'edit'">save</button>
      <button @click="state = 'edit'" v-else-if="state === 'cancel'">edit</button>
      <button @click="state = 'cancel'" v-else-if="state === 'save'">cancel</button>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import 'animate.css'

const show = ref(true)
const state = ref('save')
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  transform: scale(0);
}
.move {
  width: 200px;
  height: 200px;
  background: rebeccapurple;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;

}
@keyframes bounce-in {
  0% {
    transform: scace(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* 应用与嵌套元素都规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.7s ease;
}
.nested-enter-active .inner {
  transition-delay: 0.25s;
}
/* 延迟嵌套元素都进入以获得交错效果 */
.nested-enter-from .inner,
.nested-leave-to .inner {
  opacity: 0;
}
</style>